<script lang="ts">
import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue'
import EditorPicks from '../components/EditorsPicks.vue'
import RcmdVideo from '../components/RcmdVideo.vue'
import HotCom from '../components/HotCom.vue'
import CollectCom from '../components/CollectCom.vue'
import HomeCreated from '../components/HomeCreated.vue'
import HomeShort from '../components/HomeShort.vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { useScroll } from '../hooks/useScroll'
// let { isReachBottom, } = useScroll();
import { getTab } from '../api/home'
import { useScrollStore } from '../stores/scroll'
import { mydebounce } from '../hooks/useScroll'
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
import { showToast } from 'vant'

export default defineComponent({
  components: {
    EditorPicks,
    RcmdVideo,
    HotCom,
    CollectCom,
    HomeCreated
  },
  setup() {
    const stores = useCounterStore();
    const { tocked, userid, userInfoheard } = storeToRefs(stores)
    // 作为 action 的 increment 可以直接解构
    let router: any = useRouter();
    let route: any = useRoute();
    let active = ref<number>(2)
    let translateX = ref<number>(0)
    let scrollTop = ref<number>(document.documentElement.scrollTop);
    let currentIndex = ref<number>(0);
    let isbottom = ref(false);
    const store = useScrollStore();
    const { changeIndex } = store;
    const { scrollIndex } = storeToRefs(store);


    // //页面滚动事件
    let onscroll = () => {
      scrollTop.value = document.documentElement.scrollTop;
      // currentIndex.value = Math.round((scrollTop.value - 38) / 332);
      // changeIndex(currentIndex.value,top);
      useScroll(document.documentElement);
      useScroll(document.documentElement).scrollListenerHandler();
      isbottom.value = useScroll(document.documentElement).scrollListenerHandler();
      console.log('9999999999999', isbottom.value)
      // console.log('444444444444444444', useScroll(document.documentElement).isReachBottom.value)
      // console.log('77777777777777777', useScroll(document.documentElement).scrollListenerHandler());
    }
    //防抖
    // let debounce = mydebounce(function () {
    //   scrollTop.value = document.documentElement.scrollTop;
    //   currentIndex.value = Math.round((scrollTop.value - 38) / 332);
    //   // changeIndex(currentIndex.value);
    // }, 1000);
    //  mydebounce (onscroll, 1000);
    let istoken = localStorage.getItem('token') != null;

    let addvideoview = () => {
      console.log(tocked);
      istoken = localStorage.getItem('token') != null;
      if (istoken) {
        router.push({
          path: '/addvideo',
        })
      } else {
        showToast('请登录');
        router.push({
          path: '/register',
        });

      }

    }

    //检测tab值变化
    watch(active, (): void => {
      // console.log('watch', active.value)
      router.push({ path: '/home', query: { active: active.value } })
    })
    //监测滚动的事件，向上滚动或者向下滚动
    watch(scrollTop, (): void => {
      // console.log('scrollTop', scrollTop.value)
      let currentscroll: number = scrollTop.value;
      window.setTimeout(() => {
        let nowscroll: number = scrollTop.value
        // console.log('currentscroll,nowscroll', currentscroll, nowscroll, currentscroll - nowscroll)
        if (currentscroll - nowscroll >= 0) {
          //没有滑动了;
          // console.log('没有滑动了')
          translateX.value = 0
        } else {
          translateX.value = 60
        }
      }, 50)
      // if(scrollTop.value)
    })
    if (route.query.active == undefined) {
      active.value = 0
    } else {
      active.value = Number(route.query.active)
    }
    //监测是否触底
    // watch(isReachBottom, () => {
    //   console.log('11111isReacBottom', isReachBottom.value)
    // })

    //获取api数据
    let getTabFun = () => {
      getTab().then((data) => {
        console.log('获取tab选项数据=>', data)
      })
    }
    //跳转到搜索页面
    let tosearch = () => {
      router.push({
        path: '/searchpage',
        query: {
          flag: 1,
          active: active.value

        }
      })
    }
    //挂载开启滚动事件
    onMounted(() => {
      // console.log('isReachBottom', isReachBottom.value)
      window.addEventListener('scroll', onscroll);
      getTabFun() //获取tab选项数据
      console.log('11111111scrollTop', document.documentElement.scrollTop);
      console.log('22222222clientHeight', document.documentElement.clientHeight);
      console.log('33333333scrollHeight', document.documentElement.scrollHeight);
      istoken = localStorage.getItem('token') != null;

    })
    //销毁移出滚动事件
    onUnmounted(() => {
      window.removeEventListener('scroll', onscroll)
    })
    return {
      active,
      onscroll,
      translateX,
      addvideoview,
      tosearch,
      currentIndex,
      scrollIndex,
      userInfoheard
    }
  }
})
</script>

<template>
  <div>
    <div class="van-doc-demo-block van_tab tab">
      <div class="van-tabs van-tabs--line top">
        <!-- 选项卡标签 -->
        <van-tabs v-model:active="active" sticky animated swipeable color="#ee3729" title-active-color="#000000"
          title-inactive-color="8a8a8a">
          <van-tab title="编辑精选 "><editor-picks></editor-picks></van-tab>
          <van-tab title="推荐 "> <rcmd-video></rcmd-video></van-tab>
          <van-tab title="创意 "><home-created></home-created> </van-tab>
          <van-tab title="热门 "> <hot-com></hot-com></van-tab>
          <van-tab title="剧情短片 "> <home-short></home-short></van-tab>
          <van-tab title="创意 "> </van-tab>
        </van-tabs>
      </div>
      <div class="tab_fixed">
        <span class="iconfont icon-sousuo" @click="tosearch"></span>
        <span class="iconfont icon-lingdang"></span>
      </div>
    </div>

    <div class="null"></div>
    <!-- 加号按钮 -->
    <div class="addvideo" ref="addvideo" :style="'transform: translateX(' + translateX + 'px)'" @click="addvideoview">
      <span>+</span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.van-sticky {
  z-index: 1;
}

.tab_fixed {
  width: 70px;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 44px;
  position: fixed;
  right: 0;
  top: 0;
  background-color: #fff;
  box-shadow: -5px 0px 8px 0px white;
  z-index: 100;

  span {
    line-height: 44px;
    font-size: 20px;
  }
}

.addvideo {
  height: 54px;
  width: 54px;
  background-color: #e54c3c;
  line-height: 54px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  bottom: 74px;
  right: 15px;
  color: #fff;
  transition: all 0.3s;

  span {
    font-size: 40px;
    font-weight: normal;
  }
}
</style>
